<template>
  <el-container class="container">
    <el-main class="main">
      <div class="topDiv">
        <c-map class="chart" />
        <rate class="chart" />
      </div>
      <div class="bottomDiv">
        <warn class="warn" />
        <count class="warn" />
      </div>
    </el-main>
  </el-container>
</template>
<style lang="scss" scoped>
</style>
<script>
import cMap from "./components/map";
import Rate from "./components/rate";
import Warn from "./components/warn";
import Count from "./components/count";

export default {
  components: {
    cMap,
    Rate,
    Warn,
    Count
  },
  data() {
    return {}
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;height: 100%;
  .main {
    background-color: #f2f2f2;
    padding: 10px;
  }
}
.topDiv {
  height: 70%;
  margin-bottom:15px;
  background-color: #fff;
  position: relative;
  .chart{
    height: 100%;
    width: 50%;
    float: left;
  }
}
.bottomDiv{
  position: relative;
  display: flex;
  justify-content: space-between;
  height: calc(30% - 15px);

}
.warn{
  background-color: #fff;
  width: 49.5%;
  height: 100%;
  border-radius: 8px;
}

</style>
